<template>
  <c-select
    v-bind="$attrs"
    filterable
    :loading="loading"
    :value="value"
    :options="options"
    :props="props"
    @change="hangleChange"
  ></c-select>
</template>

<script>
import { mapGetters } from 'vuex'

const guaType2Level = {
  1: 2,
  4: 1,
}

export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
    guaType: {
      type: [Number, String],
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      props: {
        value: 'service_id',
        label: 'service_agency_name',
      },
      loading: false,
      options: [],
    }
  },
  computed: {
    ...mapGetters(['accessAgency']),
  },
  watch: {
    guaType: {
      handler: function () {
        this.getOptions()
      },
      immediate: true,
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.loading = true
      this.$store
        .dispatch('getAccessAgency')
        .then(() => {
          this.getOptions()
        })
        .finally(() => {
          this.loading = false
        })
    },

    getOptions() {
      const level = guaType2Level[this.guaType]
      this.options = level
        ? this.accessAgency.filter(agency => +agency.service_agency_lever === level)
        : []

      // 默认选择第一个
      const select = this.options[0] || {}
      this.$emit('change', select.service_id || '', { ...select })
    },

    hangleChange(val) {
      const select = this.options.find(item => item.service_id === val) || {}
      this.$emit('change', val, { ...select })
    },
  },
}
</script>

<style lang="scss" scoped></style>
